<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
    <%@ include file="../headJs.jsp"%>

<body>



<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">江信共青校区管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">nav groups</a>
                <dl class="layui-nav-child">
                    <dd><a href="">menu 11</a></dd>
                    <dd><a href="">menu 22</a></dd>
                    <dd><a href="">menu 33</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    ${user.name}
                </a>
                <dl class="layui-nav-child">
                    <dd><a class="userDetail">用户信息</a></dd>
                    <dd><a class="updatePass">修改密码</a></dd>
                    <dd><a class="signOut" href="${pageContext.request.contextPath}/login/signOut">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test1">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">用户列表</a></dd>
                        <dd><a href="javascript:;">menu 2</a></dd>
                        <dd><a href="javascript:;">menu 3</a></dd>
                        <dd><a href="">the links</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">menu group 2</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                <li class="layui-nav-item"><a href="">the links</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <table id="demo" lay-filter="test"></table>



        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-xs" lay-event="add">新增</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

            <!-- 这里同样支持 laytpl 语法，如： -->
            <%--{{#  if(d.auth > 2){ }}
            <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
            {{#  } }}--%>
        </script>

        <script type="text/html" id="userForm">
            <form id="user-form" lay-filter="user-form" class="layui-form model-form">
                <input name="id" type="hidden"/>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input name="name" placeholder="请输入昵称" type="text" class="layui-input" maxlength="20"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input name="age" placeholder="请输入年龄" type="number" class="layui-input" min="1" max="300"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        男<input name="sex"  type="radio" class="layui-input" value="male"
                                lay-verify="required" required/>
                        女<input name="sex"  type="radio" class="layui-input" value="female"
                                lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-block">
                        小学<input name="education"  type="radio" class="layui-input" value="primary"
                                 lay-verify="required" required/>
                        初中<input name="education"  type="radio" class="layui-input" value="middle"
                                 lay-verify="required" required/>
                        高中<input name="education"  type="radio" class="layui-input" value="height"
                                 lay-verify="required" required/>
                        大专<input name="education"  type="radio" class="layui-input" value="dazhuan"
                                 lay-verify="required" required/>
                        本科<input name="education"  type="radio" class="layui-input" value="benke"
                                 lay-verify="required" required/>
                        研究生<input name="education"  type="radio" class="layui-input" value="master"
                                  lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">爱好</label>
                    <div class="layui-input-block">
                        <input name="hobby" placeholder="请输入爱好" type="text" class="layui-input" maxlength="200"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <div class="layui-form-item model-form-footer" style="margin-left: 50%">
                    <button class="layui-btn layui-btn-primary close" type="button">取消</button>
                    <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
                </div>
            </form>
        </script>

        <%--显示用户信息--%>
        <script type="text/html" id="userDetail">
            <form id="user-detail" lay-filter="user-detail" class="layui-form model-form">
                <input name="id" type="hidden"/>

                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input name="name" placeholder="请输入昵称" type="text" value="${user.name}" class="layui-input" maxlength="20"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input name="age" placeholder="请输入年龄" type="number" class="layui-input" min="1" max="300"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        男<input name="sex"  type="radio" class="layui-input" value="male"
                                lay-verify="required" required/>
                        女<input name="sex"  type="radio" class="layui-input" value="female"
                                lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-block">
                        小学<input name="education"  type="radio" class="layui-input" value="primary"
                                 lay-verify="required" required/>
                        初中<input name="education"  type="radio" class="layui-input" value="middle"
                                 lay-verify="required" required/>
                        高中<input name="education"  type="radio" class="layui-input" value="height"
                                 lay-verify="required" required/>
                        大专<input name="education"  type="radio" class="layui-input" value="dazhuan"
                                 lay-verify="required" required/>
                        本科<input name="education"  type="radio" class="layui-input" value="benke"
                                 lay-verify="required" required/>
                        研究生<input name="education"  type="radio" class="layui-input" value="master"
                                  lay-verify="required" required/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">爱好</label>
                    <div class="layui-input-block">
                        <input name="hobby" placeholder="请输入爱好" type="text" class="layui-input" maxlength="200"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input name="address" placeholder="请输入地址" type="text" class="layui-input" maxlength="200"
                               lay-verify="required" required style="width: 280px"/>
                    </div>
                </div>

                <%--<div class="layui-form-item model-form-footer" style="margin-left: 60%">
                    <button class="layui-btn layui-btn-primary close" type="button">确定</button>
                </div>--%>
            </form>
        </script>

        <script>
            layui.use(['form','table','element', 'layer', 'util'], function(){
                var table = layui.table;
                var form = layui.form;

                var element = layui.element
                    ,layer = layui.layer
                    ,util = layui.util
                    ,$ = layui.$;


                var formUrl;
                //第一个实例
                table.render({
                    elem: '#demo'
                    ,title: '用户列表'
                    ,height: 'full-120'
                    ,url: '${pageContext.request.contextPath}/user/getUserList' //数据接口
                    ,page: true //开启分页
                    ,limit: 50 //每页数据量
                    ,limits: [10,20,50,100] //每页数据量
                    ,cols: [[ //表头
                        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'name', title: '用户名', width:80}
                        ,{field: 'age', title: '年龄', width:80, sort: true}
                        ,{field: 'sex', title: '性别', width:80, sort: true,templet: function(d){
                                //得到当前行数据，并拼接成自定义模板
                                return d.sex == "male" ? "男" : "女" ;
                            }}
                        ,{field: 'education', title: '学历', width:80, sort: true,templet: function(d){
                                //得到当前行数据，并拼接成自定义模板
                                var str;
                                if(d.education == "primary") {
                                    str = "小学"
                                } else if(d.education == "middle"){
                                    str = "中学"
                                } else if(d.education == "heigh"){
                                    str = "高中"
                                } else if(d.education == "dazhuan"){
                                    str = "大专"
                                } else if(d.education == "benke"){
                                    str = "本科"
                                } else {
                                    str = "研究生"
                                }
                                return str ;
                            }}
                        ,{field: 'hobby', title: '爱好', width:200, sort: true}
                        ,{field: 'address', title: '地址', width:200, sort: true}
                        ,{align: 'center', width:200,toolbar: '#barDemo', title: '操作'}

                    ]]
                });

                //工具条事件
                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    if(layEvent === 'add'){ //
                        showEditModel();
                    } else if(layEvent === 'del'){ //删除
                        layer.confirm('真的删除行么', function(index){
                            $.post('${pageContext.request.contextPath}/user/delUserById', {
                                id: data.id
                            }, function (data) {
                                layer.closeAll('loading');
                                if (data.code > 0) {
                                    layer.msg(data.msg, {icon: 1});
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            });
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            //向服务端发送删除指令
                        });
                    } else if(layEvent === 'edit'){ //编辑
                        showEditModel(data);
                        //同步更新缓存对应的值
                        obj.update({
                            username: '123'
                            ,title: 'xxx'
                        });
                    } else if(layEvent === 'LAYTABLE_TIPS'){
                        layer.alert('Hi，头部工具栏扩展的右侧图标。');
                    }
                });

                // 显示表单弹窗
                var showEditModel = function (data,layerevent) {
                    layer.open({
                        type: 1,
                        title: data ? '修改用户' : '新增用户',
                        area: '450px',
                        offset: '120px',
                        content: $('#userForm').html(),
                        success: function () {
                            $('#user-form')[0].reset();
                            formUrl = '${pageContext.request.contextPath}/user/add';
                            if (data) {
                                formUrl = '${pageContext.request.contextPath}/user/edit';
                                form.val('user-form', data);
                            }

                            form.on('submit(user-form-submit)',function (obj) {
                                //layer.load(2);
                                $.post(
                                    formUrl,
                                    obj.field,
                                    function (data) {
                                        if(data.code > 0){
                                            layer.msg('编辑成功',{icon:1});
                                            table.reload('demo', {});
                                            layer.closeAll('page');
                                        } else {
                                            layer.msg('编辑失败',{icon:2});
                                        }
                                    },
                                    'JSON'
                                );
                                return false;
                            })


                            $('#user-form .close').click(function () {
                                layer.closeAll('page');
                            });
                        }
                    });

                };

                /*//头部事件
                util.event('lay-header-event', {
                    //左侧菜单事件
                    menuLeft: function(othis){
                        layer.msg('展开左侧菜单的操作', {icon: 0});
                    }
                    ,menuRight: function(){
                        layer.open({
                            type: 1
                            ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                            ,area: ['260px', '100%']
                            ,offset: 'rt' //右上角
                            ,anim: 5
                            ,shadeClose: true
                        });
                    }
                });*/


                $(document).on('click', '.userDetail', function(data) {
                    var url="${pageContext.request.contextPath}/user/userDetail";
                    top.layer.open({
                        type: 2,
                        title: '用户信息',
                        area : [ '620px', '400px' ] // 宽高自适应
                        ,shade : 0,
                        maxmin : true,
                        // content: $('#userDetail').html(),
                        content: url,
                        btn:['确定'],
                        yes:function (index,layero) {
                            layer.close(index);
                        },
                        success:function () {

                        }
                    });

                });



                $(document).on('click', '.updatePass', function(data) {
                    var url="${pageContext.request.contextPath}/user/updatePass";
                    top.layer.open({
                        type: 2,
                        title: '用户信息',
                        area : [ '420px', '400px' ] // 宽高自适应
                        ,shade : 0,
                        maxmin : true,
                        // content: $('#userDetail').html(),
                        content: url,

                    });

                });


            });

            /*
                        function userDetail() {
                            layer.open({
                                type: 1,
                                title: '用户信息',
                                area: '450px',
                                offset: '120px',
                                content: $('#userDetail').html(),
                                btn:['确定'],
                                yes:function (index,layero) {
                                    layer.close(index);
                                }
                            });

                        }*/
        </script>
    </div>


    <div class="layui-footer">
        江西信息应用职业技术学院共青校区@2021&nbsp;&nbsp;&nbsp;
        <a href="${pageContext.request.contextPath}/user/aopTest">使用事务</a> &nbsp;&nbsp;&nbsp;
        <a href="${pageContext.request.contextPath}/user/noAopTest">不使用事务</a>

    </div>
</div>


</body>
</html>